/**
 * @Author your name
 * @Date 2021-03-05 15:51:06
 * @LastEditTime 2021-03-05 16:49:25
 * @LastEditors Please set LastEditors
 * @Description In User Settings Edit
 * @FilePath \fed-e-task-04-06\code\angular-demo\src\app\animation.ts
 */
// src\app\animation.ts
import { animate, animateChild, animation, group, keyframes, query, stagger, state, style, transition, trigger, useAnimation } from '@angular/animations';

// 入场动画
export let slideAnimationEnter = animation([
    // 定义 void 状态的样式
    style({ opacity: 0, transform: "translateY(40px)" }),
    // 定义入场动画时间与 * 状态的样式
    animate(250, style({ opacity: 1, transform: "translateY(0px)" }))
])

// 出场动画
export let silideAnimationLeave = animation([
    animate(
        // 使用双括号占位
        "{{ dyration }} {{ delay }} {{ easing }}",
        keyframes([
            style({ offset: .3, transform: "translateX(-80px)" }),
            style({ offset: 1, transform: "translateX(100%)" }),
        ])
    )
], {
    // 设置默认值
    params: {
        dyration: '1s',
        delay: '0s',
        easing: 'ease-out'
    }
})

// 将入场动画和出场动画都添加到动画中
export let slideAnimation = trigger("slide", [
    transition("void => *", useAnimation(slideAnimationEnter)),
    transition("* => void", useAnimation(silideAnimationLeave, { params: { delay: '1s' } }))
])

export let todoAniamtions = trigger("todoAniamtions", [
    transition(":enter", [
        group([
            // 查询子级 h2 标签并添加入场动画
            query("h2", [
                style({ transform: 'translateY(-40px)', opacity: 0 }),
                animate(300)
            ]),
            // 查询子级动画  使其执行  
            // stagger  交错执行  每一个相对上一个延迟 200ms 
            query("@slide", stagger(200, animateChild()))
        ])
    ])
])

// 创建自定义动画
export let collapsedExpanded = trigger("collapsedExpanded", [
    // 使用 state 方法定义折叠状态元素对应的样式
    state("collapsed", style({
        height: 0,
        overflow: 'hidden',
        paddingTop: 0,
        paddingBottom: 0
    })),
    // 使用 state 方法定义展开状态元素对应的样式
    state("expanded", style({
        height: '*',
        overflow: "auto",
        paddingTop: 15,
        paddingBottom: 15
    })),
    // 定义展开动画
    transition("collapsed => expanded", animate("400ms ease-out")),
    // 定义折叠动画
    transition("expanded => collapsed", animate("400ms ease-in"))
])